<template>
  <HeaderPart>
    在线支付
  </HeaderPart>
  <div class="orderPart">
    <p style="color: #AEAEAE">订单信息:</p>
    <div class="food">
      <p>{{ shopInfo.name }}({{shopInfo.description}}):</p>
      <p>￥{{orderInfo.orderTotal}}</p>
    </div>
    <ul v-for="item in orderDetailInfo"
        :key="item.id"
    >
      <li>
        <div class="fond_detail">
          <p>{{item.name}} X {{item.quantity}}</p>
          <p>￥{{item.quantity * item.price}}</p>
        </div>
      </li>
    </ul>
    <div class="deliver">
      <p>配送费</p>
      <p>￥{{shopInfo.deliveryPrice}}</p>
    </div>
    <div class="payPart">
      <div class="wechat" @click="payWay=1">
        <img src="/images/wechat.jpg">
        <p>微信支付</p>
        <i v-show="payWay"  class="iconfont icon-zhengque1"></i>
      </div>

      <div class="alipay" @click="payWay=0">
        <img src="/images/alipay.jpg">
        <p>支付宝</p>
        <i v-show="!payWay" class="iconfont icon-zhengque1"></i>
      </div>

      <el-button  type="success" @click="dialogVisible = true">确认支付</el-button>
      <el-dialog
          v-model="dialogVisible"
          width="80%"
          center
          height="100%"
      >
        <img class="pay" :src="payWay?'/images/payByWechat.png':'/images/payByali.jpg'">
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
  <TabBar></TabBar>
</template>

<script setup>
// import { format } from 'date-fns'
import HeaderPart from "@/components/common/HeaderPart";
import TabBar from '@/components/common/TabBar'
import {useRoute} from "vue-router";
import {onBeforeMount, ref} from "vue";
import {getShopById} from "@/utils/api/ShopManager";
import {getOrder, getOrderDetail, removeOrderDetail, updateOrder} from "@/utils/api/orderManager";
import {removeCart} from "@/utils/api/cartManager";

//获得userId
const userId = JSON.parse(localStorage.getItem("userLoginAll")).id

// 获得shopId
const shopId = parseInt(useRoute().params.shopId)
// 获取门店信息
const shopInfo = ref({})
// 获取订单信息
const orderInfo = ref({})
// 获取订单详情
const orderDetailInfo = ref([])
onBeforeMount(async ()=>{
  const res = await getShopById({id:shopId})
  shopInfo.value = res.data
  // 获取订单
  const res1 = await getOrder({shopId, userId})
  orderInfo.value = res1.data
  // 获取订单详情
  const res2 = await getOrderDetail({orderId:orderInfo.value.id})
  orderDetailInfo.value = res2.data
})
// 定义支付方方式
const payWay = ref(1)
// 定义视口可见与否
const dialogVisible = ref(false)

const handleClose = () => {
  dialogVisible.value = false
}
const handleConfirm = ()=> {
  // 修改订单为已支付
  updateOrder({id:orderInfo.value.id})
  // 购买完成， 移除购物车
  removeCart({userId, shopId})
  // 移除订单详情
  removeOrderDetail({orderId:orderInfo.value.id})
  dialogVisible.value = false
}

</script>

<style scoped>
.orderPart .payPart {
  display: flex;
  flex-direction: column;
}
.food p {
  color: red;
}
.orderPart .payPart img {
  height: 3rem;
  width: 3rem;
}
.orderPart .payPart .wechat {
  position: relative;
}
.orderPart .payPart .alipay {
  position: relative;
}
.orderPart i {
  color: #35c973;
  position: absolute;
  right: 0;
  top:10px
}
.orderPart .payPart .wechat {
  display: flex;
  justify-content:flex-start;
}
.orderPart .payPart .alipay {
  display: flex;
  justify-content:flex-start;
}
.orderPart {
  margin-top: 3rem;
  padding: 20px;
}
.orderPart .food{
  display: flex;
  justify-content: space-between;
}
.orderPart ul {
  list-style: none;
  padding-inline-start: 0
}
.orderPart ul li {

}
.orderPart ul li .fond_detail {
  display: flex;
  justify-content: space-between;
}
.orderPart .deliver {
  display: flex;
  justify-content: space-between;
}
:deep(style attribute) {

}
.pay {
  height: 200px;
}
:deep(.el-dialog img) {
  height: 200px !important;
  width: 200px !important;
  margin-left: 4rem !important;
}
:deep(.el-dialog) {
  --el-dialog-padding-primary: 60px;
  --el-dialog-content-font-size: 160px
}
:deep(.el-dialog__body) {
  padding: 0;
  height: 200px;
}
</style>